  <template>
  <div>
    <el-row style="padding:0 0 5px 100px;">
      <el-button class="navButton" type="info" v-for="(item,index) in navItems" :key="index" @click="routeToType(item.key)">{{item.name}}</el-button>
    </el-row>

    <el-row style="padding-top:30px;" v-for="(item,index) in searchTypes" :key="index">
      <el-col :span="16" :offset="1" style="height:465px">
        <h2 style="padding-left: 20px">{{item.label}}</h2>
        <Divider></Divider>
        <!--  <div v-if="!item.searched" style="line-height:445px;text-align: center;font-size:24px;color:#666">
          正在加载中....
        </div> --> 
        <el-col :span="6" v-for="(itemlist, index) in item.list" :key="index" style="padding: 10px;height:192px">
          <div @click="routeToSingle(itemlist.id)" style="cursor: pointer;">
            <el-card :body-style="{ height:'130px' }">
              <div style="width: 100%;height: 100px;border: solid 1px #ccc">
                <img :src="pic" style="width: 100%;height: 100px;">
              </div>
              <div style="text-align: center;line-height: 30px;">{{itemlist.title}}</div>
            </el-card>
          </div>
        </el-col>
      </el-col>
    </el-row>

    <!--右侧导航条-->
    <div class="elevator-module">
      <div class="nav-list">
        <div sortindex="0" class="item sortable">攻略分类</div>
        <div sortindex="1" class="item sortable">国内游</div>
        <div sortindex="2" class="item sortable">出境游</div>
        <div sortindex="3" class="item sortable">热门景点</div>
        <div sortindex="4" class="item sortable">购物圣地</div>
        <div sortindex="5" class="item sortable">旅游文摘</div>
        <div sortindex="6" class="item sortable">热门攻略</div>
      </div>
      <div class="back-top icon"></div>
    </div>
    <!--尾部联系方式-->
  </div>
</template>

<script>
import { articleListServer } from "../../api/reference";
//旅游攻略
export default {
  name: "travelGuide",
  data() {
    return {
      navItems: [
        { key: "inbound", name: "国内游" },
        { key: "abroad", name: "出境游" },
        { key: "spot", name: "热门景点" },
        { key: "shopping", name: "购物圣地" },
        { key: "article", name: "旅游文摘" },
        { key: "hotGuide", name: "热门攻略" }
      ],
      pic:require("../../assets/img/pic.jpg"),
      searchTypes: [
        {
          name: "inbound",
          label: "国内游",
          searched: false,
          list: [
		  ]
        },
        {
          name: "abroad",
          label: "出境游",
          searched: false,
          list: [
		  
		  ]
        },
        {
          name: "spot",
          label: "热门景点",
          searched: false,
          list: []
        },
        {
          name: "shopping",
          label: "购物圣地",
          searched: false,
          list: []
        },
        {
          name: "article",
          label: "旅游文章",
          searched: false,
          list: [
		    { id: "4", title: "admin111" }, 
		  ]
        },
        {
          name: "hot-guide",
          label: "热门攻略",
          searched: false,
          list: []
        }
      ]
    };
  },
  mounted() {
    this.getAllReferenceData();
  },
  methods: {
    routeToType(tag) {
      this.$router.push({ path: "/travel-reference/article", query: { tag,state:0 } });
    },
    routeToSingle(id) {
      this.$router.push({ path: `travel-reference/${id}` });
    },
    getAllReferenceData() {
      this.searchTypes.forEach(item => {
        let params = {
          tag: item.name,
          state: 0,
          pageSize: 8,
          current: 1
        }; 
		console.log(params.state);
        if (item.name === "hot-guide") {
          delete params.tag;
        }
        let obj = item; 
      });
    }
  }
};
</script>
<style lang="less">

</style>
